<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox{
            width: 600px;
            height: 600px;
            background-color: aqua;
        }
        .bigbox .smbox{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
        .bigbox .smbox .xsbox{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 2px solid;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="smbox">
             <div class="xsbox"></div>
        </div>
    </div>
    <script>
        //事件捕获、目标元素(事件源)、事件冒泡：
        //addEventListener(事件类型，时间处理函数，[true/false])
        //true:在捕获阶段处理事件程序
        //false:在冒泡阶段处理事件程序，默认值
        const xs = document.querySelector('.xsbox');
        //事件对象：事件处理函数中的第一个参数，evt,e,event
        xs.addEventListener('click',function(evt){
            console.log(evt.type);  //对象.属性：访问事件对象中的type属性(事件类型)
            console.log(evt.target);  //触发事件的元素
            alert('点击了小小盒子');
            evt.stopImmediatePropagation();   //阻止传播(冒泡)
        },false);

        const sm = document.querySelector('.smbox');
        sm.addEventListener('click',function(evt){
            alert('点击了小盒子');
            evt.stopImmediatePropagation();
        },false);

        document.addEventListener('click',function(){
            alert('这是文档响应');
        },false);
    </script>
   
</body>
</html>